<template>
  <el-dialog v-model="ifShow" title="开票信息">
    <el-row justify="end" class="mt-2">
      <el-button v-if="checkPermission(Permissions.project_detail, Action.add)" type="primary" size="small"
                 @click="showAddProjectDetailDialog=true">添加开票信息
      </el-button>
    </el-row>
    <el-table stripe :data="projectDetail">
      <el-table-column label="是否开票" prop="invoice"/>
      <el-table-column label="发票文件" prop="invoice_path">
        <template #default="{row}">
          <download-file-button v-model="row.invoice_path" file-name="发票文件">
            点击下载发票文件
          </download-file-button>
        </template>
      </el-table-column>
      <el-table-column label="收款金额" prop="payment_amount"/>
      <el-table-column label="备注信息" prop="remarks"/>
      <el-table-column label="操作">
        <template #default="{row}">
          <el-popconfirm v-if="checkPermission(Permissions.project_detail, Action.delete)" title="确认删除嘛？"
                         @confirm="deleteProjectDetailFn(row.company_project_progress_id)">
            <template #reference>
              <el-button type="danger" size="small" :loading="deleteLoading">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
  </el-dialog>

  <add-project-detail-dialog v-model="showAddProjectDetailDialog" v-model:project-id="projectIdModel"
                             @success="refetch()"/>
</template>

<script setup lang="ts">
import {useMutation, useQuery} from "@pinia/colada";
import {deleteProjectDetail, getProjectDetail} from "../../../api/project_detail.ts";
import AddProjectDetailDialog from "./AddProjectDetailDialog.vue";
import {ref} from "vue";
import {ElMessage} from "element-plus";
import DownloadFileButton from "../../../components/DownloadFileButton.vue";
import {useUserStore} from "../../../store/userStore.ts";
import {Action, Permissions} from "../../../types/permissions.ts";

const ifShow = defineModel<boolean>({
  default: true
})

const showAddProjectDetailDialog = ref(false);

const projectIdModel = defineModel<number>("projectId");

let {checkPermission} = useUserStore();

let {data: projectDetail, refetch} = useQuery({
  key: () => ['project_detail', projectIdModel.value ?? null],
  query: () => getProjectDetail(<number>projectIdModel.value),
  enabled: () => projectIdModel.value !== undefined
});

let {mutate: deleteProjectDetailFn, isLoading: deleteLoading} = useMutation({
  mutation: (projectId: number) => deleteProjectDetail(projectId),
  onSuccess: () => {
    ElMessage.success("删除成功!");
    refetch()
  }
});

</script>

<style scoped>

</style>